<template>
  <div class="wrapper vCenter">
    <div class="main" style="padding: 30px; border: 1px solid #ccc; background-color: #ddd;">
      <h3>登录页面</h3>
      <p style="margin: 15px 0;"><input class="inpt" v-model="username" /></p>
      <p style="margin-bottom: 15px;"><input class="inpt"  v-model="password" /></p>
      <p><button class="inpt" @click="login">登录</button></p>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        username: '',
        password: ''
      }
    },
    methods:{
      login(){
        if(this.username == '' || this.password == ''){
          alert('用户名或密码不能为空！');
        }else{
          this.$router.push({
            name: 'index',
            params:{ username: this.username }
          });
        }
      }
    }
  }
</script>

<style scoped>
  .inpt{
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border: 1px solid #ccc;
  }
</style>
